﻿

@section css{
    <link href="~/Content/assets/global/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css?123134" rel="stylesheet" type="text/css" />
    <link href="~/Content/assets/global/plugins/bootstrap-modal/css/bootstrap-modal.css?123134" rel="stylesheet" type="text/css" />
    <link href="~/Content/assets/global/plugins/datatables/media/css/dataTables.bootstrap.min.css" rel="stylesheet" />
}

<div class="page-content">
    <div>
        <!-- BEGIN PAGE CONTENT-->
        <div class="row">
            <div class="col-md-12">
                <!-- BEGIN EXAMPLE TABLE PORTLET-->
                <div class="portlet box green">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-edit"></i>博客管理
                        </div>
                        <div class="tools">
                            <a href="javascript:;" class="collapse">
                            </a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div id="tableContainer">
                            <table class="table table-striped table-hover table-bordered" id="myDatatable">
                                <thead>
                                    <tr>
                                        <th>
                                            标题
                                        </th>
                                        <th>
                                            类别
                                        </th>
                                        <th>
                                            更新时间
                                        </th>
                                        <th>
                                            操作
                                        </th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- END EXAMPLE TABLE PORTLET-->
            </div>
        </div>
        <!-- END PAGE CONTENT -->
    </div>
</div>

@section scripts{
    <script src="~/Content/assets/global/plugins/bootstrap-modal/js/bootstrap-modalmanager.js?123134" type="text/javascript"></script>
    <script src="~/Content/assets/global/plugins/bootstrap-modal/js/bootstrap-modal.js?1231314" type="text/javascript"></script>
    <script src="~/Content/assets/global/plugins/datatables/media/js/jquery.dataTables.js"></script>
    <script src="~/Content/assets/global/plugins/datatables/media/js/dataTables.bootstrap.js"></script>
    <script type="text/javascript">
        $(function () {
            myFunc.init();
        })

        var actions = {
            list: '@Url.Action("AjaxGetList", "BlogArticle")',
            edit: '@Url.Action("AddOrEdit", "BlogArticle")',
            remove: '@Url.Action("AjaxDelete", "BlogArticle")',
        }

        var myFunc = (function () {
            var listTable = $('#myDatatable').dataTable({
                "aLengthMenu": [10, 15, 20],
                "info": true,
                'bPaginate': true,  //是否分页。
                'bFilter': false,
                "bServerSide": true,
                "bProcessing": true,
                "sAjaxSource": actions.list,//这个是请求的地址
                "aoColumns": [
                             {
                                 "mData": "ID",
                                 "mRender": function (data, type, full) {

                                     return Metronic.formatString('<a href="/b/{0}" >{1}</a>', data, full.Title);
                                 }
                             },
                             { "mData": "Category" },
                             { "mData": "UpdateTime" },
                             { //自定义列
                                 "mData": "ID",
                                 "sClass": "center",
                                 "bSearchable": false,
                                 "bSortable": false,
                                 "mRender": function (data, type, full) {

                                     return Metronic.formatString('<div class="btn-group">\
                                                                    <a href="{0}?blogid={1}" class="btn  green">编辑 <i class="fa fa-edit"></i></a>\
                                                                </div>\
                                                                <div class="btn-group">\
                                                                    <button class="btn red delete"  bid="{2}"><i class="fa fa-trash-o"></i>删除</button>\
                                                                    </div>', actions.edit, data, data);
                                 }
                             }
                ],
                "aoColumnDefs": [{
                    sDefaultContent: '',
                    aTargets: ['_all']
                }],
                "fnServerData": retrieveData, // 获取数据的处理函数
                "oLanguage": {

                    "sProcessing": "正在加载中......",

                    "sLengthMenu": "每页显示 _MENU_ 条记录",

                    "sZeroRecords": "对不起，查询不到相关数据！",

                    "sEmptyTable": "表中无数据存在！",

                    "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",

                    "sInfoFiltered": "数据表中共为 _MAX_ 条记录",

                    "oPaginate": {

                        "sFirst": "首页",

                        "sPrevious": "上一页",

                        "sNext": "下一页",

                        "sLast": "末页",

                    },

                },
                "drawCallback": function (settings) {
                    bindListElement();
                }
            });

            // 3个参数的名字可以随便命名,但必须是3个参数,少一个都不行
            function retrieveData(sSource, aoData, fnCallback) {
                $.ajax({

                    url: sSource,//这个就是请求地址对应sAjaxSource

                    data: $.param(aoData) ,//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数

                    type: 'post',

                    dataType: 'json',

                    async: false,

                    success: function (result) {

                        fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的

                    },

                    error: function (msg) {

                    }

                });

            }

            function bindListElement() {
                $('button.delete').on('click', function () {
                    var bid = $(this).attr('bid');
                    Metronic.modalAlert({
                        message: "您确定要删除该文章吗？",
                        dialogId: "deleteDialog",
                        cancelButton: { text: "取消" },
                        callBack: fnDelete,
                        callBackArgs: { bid: bid }
                    })
                })
            }

            var refreshTable = function () {
                var currentPage = $('#myDatatable_paginate li.paginate_button.active>a').html();
                listTable.fnPageChange(currentPage - 1, true);
            }

            var fnDelete = function (obj) {

                Metronic.ajax(
                        {
                            url: actions.remove,
                            data: { blogid: obj.bid },
                            elem: true,
                        }).done(function () {
                            refreshTable();
                        });
            }

            return {
                init: function () {

                }
            };
        })();


    </script>
}